<template>
  <div class="content">
    <SearchForm
      class="selectGroup"
      :search-form="searchForm"
      :search-data="searchData"
      :searchHandle="searchHandle"
      :no-border="'border:none'"
    />
    <Table
      :table-data="tableData"
      :row-header="rowHeader"
      :table-option="tableOption"
      @handleButton="handleButton"
      :page-obj="pageObj"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      element-loading-text="拼命加载中..."
      element-loading-background="rgba(0, 0, 0, 0.1)"
    />
    <Dialog
      :dialogVisible.sync="dialogVisible"
      :dialogData="dialogData"
      @close="dialogVisible = false"
      :dialogType="dialogType"
      ref="dialogRef"
      @addTsk="addTsk"
    />
    <el-dialog title="修改状态" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.state" placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sure">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Dialog from "../taskDetails/dialog.vue";
import SearchForm from "@/components/searchForm/index.vue";
import Table from "@/components/Table/baseTable";
import { TaskById, QueryTask, DeleteTask, AddNewTask } from "@/api/task.js";
import { UserQuery } from "@/api/mange.js";

export default {
  name: "onDoing",
  components: {
    Table,
    SearchForm,
    Dialog,
  },
  data() {
    return {
      dialogVisible: false,
      dialogData: {},
      dialogType: "new",
      dialogFormVisible: false,
      formLabelWidth: "150px",
      options: [
        {
          value: 1,
          label: "进行中",
        },
        {
          value: 2,
          label: "已拒绝",
        },
        {
          value: 3,
          label: "已完成",
        },
        {
          value: 4,
          label: "已验收",
        },
      ],
      form: {
        state: "",
      },
      tableData: [],
      rowHeader: [
        {
          label: "排序",
          width: "25px",
          prop: "title",
          render: (params, index) => {
            return (
              index + 1 + (this.pageObj.currentPage - 1) * this.pageObj.size
            );
          },
        },
        {
          prop: "projectName",
          label: "项目",
        },
        {
          prop: "taskTitle",
          label: "任务标题",
        },
        {
          prop: "taskResponsible",
          label: "负责人",
        },
        {
          prop: "taskTypeName",
          label: "类型",
        },
        {
          prop: "taskStateName",
          label: "状态",
        },
        {
          prop: "startTime",
          label: "创建时间",
        },
        {
          prop: "endTime",
          label: "计划时间",
        },
      ],
      tableOption: {
        label: "操作",
        width: "320",
        options: [
          {
            type: "icon",
            icon: "el-icon-share",
            methods: "editState",
          },
          {
            type: "text",
            methods: "edit",
            label: "编辑任务详情",
          },
          {
            type: "text",
            methods: "delete",
            label: "删除",
          },
        ],
      },
      pageObj: {
        total: 0,
        size: 10,
        sizes: [10, 30, 50, 100],
        currentPage: 1,
      },
      searchForm: [
        {
          type: "Select",
          label: "负责人:",
          options: [],
          prop: "searchByMange",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
      ],
      searchData: {
        searchByMange: "",
      },
      searchHandle: [
        {
          type: "primary",
          label: "查询",
          handle: (item) => {
            this.query();
          },
        },
      ],
    };
  },
  mounted() {
    this.userQuery();
    this.queryProfect();
  },
  methods: {
    addTsk() {
      this.queryProfect();
    },
    sure() {
      this.dialogFormVisible = false;
      AddNewTask({ id: this.rowId, taskState: this.form.state }).then((res) => {
        this.query();
      });
    },
    queryProfect() {
      QueryTask({
        page: this.pageObj.currentPage,
        limit: this.pageObj.size,
        taskState: 1,
      }).then((res) => {
        if (res.code == "200") {
          this.tableData = res.result.records;
          this.pageObj.total = res.result.total;
        }
      });
    },
    handleCurrentChange(val) {
      this.pageObj.currentPage = val;
      this.queryProfect();
    },
    handleSizeChange(val) {
      this.pageObj.currentPage = 1;
      this.pageObj.size = val;
      this.queryProfect();
    },
    handleButton(methods, data, row, index) {
      if (methods === "delete") {
        this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        }).then(() => {
          DeleteTask({ id: row.id }).then((res) => {
            this.queryProfect();
          });
        });
      } else if (methods === "edit") {
        this.dialogType = "edit";
        this.dialogVisible = true;
        this.$refs.dialogRef.searchData = row;
        // this.$refs.dialogRef.searchData.relationProjectId =
        //   window.localStorage.getItem("projectName");
      } else if (methods === "editState") {
        this.dialogFormVisible = true;
        this.form.state = row.taskStateName;
        this.rowId = row.id;
      }
    },
    query() {
      QueryTask({
        page: this.pageObj.currentPage,
        limit: this.pageObj.size,
        taskState: 1,
        taskResponsibleId: this.searchData.searchByMange,
      }).then((res) => {
        this.tableData = res.result.records;
        this.queryTaskData = this.tableData;
      });
    },
    userQuery() {
      this.searchForm[0].options = [];
      UserQuery({}).then((res) => {
        res.result.map((item) => {
          this.searchForm[0].options.push({
            label: item.name,
            value: item.id,
          });
        });
      });
    },
  },
};
</script>
<style scoped>
.content {
  height: 100%;
  width: 100%;
}
.selectGroup {
  display: flex;
  align-items: center;
  height: 106px;
}
</style>